<template>
  <div style="padding: 10px; background-color: #fff">
    <el-table
      height="100px"
      v-adaptive="{ bottomOffset: 20 }"
      :data="tableData"
      border
    >
      <el-table-column align="center" prop="name1" label="日期" width="180">
        <template slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="scope.row.name1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name2" label="型别" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name2"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name3" label="工序号" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name3"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name4" label="零件号" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name4"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name5" label="熔批号" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name5"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name6" label="设备" width="130">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name6"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name7" label="装炉数量" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name7"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name8" label="装炉时间" width="180">
        <template slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="scope.row.name8"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name9" label="真空度" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name9"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name10"
        label="到温时间"
        width="180"
      >
        <template slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="scope.row.name10"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name11"
        label="处理温度"
        width="100"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name11"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name12"
        label="停炉时间"
        width="180"
      >
        <template slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="scope.row.name12"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name13"
        label="出炉时间"
        width="180"
      >
        <template slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="scope.row.name13"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name14"
        label="发出数量"
        width="100"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name14"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name15" label="去应力">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.name15"
            @change="handleChange(scope.row, ['name16', 'name17', 'name18'])"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column align="center" label="校型次数">
        <el-table-column align="center" prop="name16" label="1">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.name16"
              @change="handleChange(scope.row, ['name15', 'name17', 'name18'])"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name17" label="2">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.name17"
              @change="handleChange(scope.row, ['name15', 'name16', 'name18'])"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name18" label="3">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.name18"
              @change="handleChange(scope.row, ['name16', 'name17', 'name15'])"
            ></el-checkbox>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="name19" label="班次" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name19"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name20" label="操作者" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name20"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name21" label="备注" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name21"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        name1: `2022-6-${i + 10} 06:11:00`,
        name2: "",
        name3: `4${i}`,
        name4: "P1001",
        name5: "20",
        name6: "10米热压罐",
        name7: "10",
        name8: `2022-6-${i + 10} ${i + 10}:${i + 20}:00`,
        name9: `0.${Math.ceil(Math.random() * 6)}`, //0.2 0.6
        name10: "2022-6-22 10:32:00",
        name11: "80℃",
        name12: "2022-6-22 15:29:00",
        name13: "2022-6-22 15:36:00",
        name14: "16",
        name15: false,
        name16: false,
        name17: true,
        name18: false,
        name19: 43,
        name20: "admin",
        name21: "备注",
      });
    }
  },
  methods: {
    handleChange(row, keys) {
      keys.forEach((element) => {
        row[element] = false;
      });
    },
  },
};
</script>

<style>
</style>